<template>
    <div>
        <el-button type="danger" @click="AddFirst({type:'category_first_add'})">添加一级分类</el-button>
        <hr class="hr-wrap">
        <div>
            <el-row :gutter="18">
                <el-col :span="12">
                    <div class="category-wrap">
                        <div class="category" v-for="firstItem in category.item" :key="firstItem.id">
                            <h4>
                                <svg-icon icon-class="plus"></svg-icon>
                                {{ firstItem.category_name }}
                                <div class="button-group">
                                    <el-button size="mini" type="danger" round @click="editCategory({categoryName:firstItem, type:'category_first_edit'})">编辑</el-button>
                                    <el-button size="mini" type="danger" round @click="addSecondCategory({categoryName:firstItem, type:'category_second_add'})">添加子级</el-button>
                                    <el-button size="mini" round @click="DeleteCategoryConfirm(firstItem.id)">删除</el-button>
                                </div>
                            </h4>
                            <ul v-if="firstItem.children" >
                                <li v-for="childrenItem in firstItem.children" :key="childrenItem.id">
                                    {{childrenItem.category_name}}
                                    <div class="button-group">
                                        <el-button size="mini" type="danger" round>编辑</el-button>
                                        <el-button size="mini" round>删除</el-button>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- <div class="category">
                            <h4>
                                <svg-icon icon-class="plus"></svg-icon>新闻
                            </h4>
                            <ul>
                                <li>国内</li>
                                <li>国内</li>
                            </ul>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="menu-title">
                        <h4>一级分类编辑</h4>
                    </div>
                    <el-form label-width="142px" class="form-wrap" ref="categoryForm">
                        <el-form-item label="一级分类名称" v-if="category_first_name" prop="categoryName">
                            <el-input v-model="form.categoryName" size="mini" :disabled="category_first_disabled"></el-input>
                        </el-form-item>
                        <el-form-item label="二级分类名称" v-if="category_second_name" prop="secCategoryName">
                            <el-input v-model="form.secCategoryName" size="mini" :disabled="category_second_disabled"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="submit" :loading="submit_button_loading" :disabled="submit_button_disabled">创建</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { reactive ,ref , isRef ,toRefs ,onMounted, watch } from '@vue/composition-api';
import { AddFristCategory, GetCategory, DeleteCategory, EditCategory, AddChildrenCategory} from '../../api/news';
import { global } from '../../utils/global_3.0';
import { common } from '../../api/common';

export default {
    name: 'IndexCategory',
    setup(props,{ root, refs}) {
        const { categoryItem, getInfoCategoryAll} = common();
        const { str, confirm } = global();

        // const labelPosition = ref('right')
        const category_first_name = ref(true);
        const category_second_name = ref(true);
        const category_first_disabled = ref(true);
        const category_second_disabled = ref(true);
        const submit_button_disabled = ref(true);
        const submit_button_loading = ref(false);
        const delete_id = ref();
        const submit_button_type = ref();


        const form = reactive({
            categoryName: '',
            secCategoryName: ''
        })
        const category = reactive({
            item: [],
            current: []
        })

        const AddFirst = ((params)=>{
            console.log('AddFirst', '')
            submit_button_type.value = params.type;
            category_first_name.value = true;
            category_second_name.value = false;
            category_first_disabled.value = false;
            submit_button_disabled.value = false;

        })
        // const getCategory = (()=>{
        //     console.log('getCategory', '')
        //     GetCategory({}).then(response =>{
        //         let data=response.data.data.data
        //         console.log(data)
        //         category.item = data
        //         // console.log(category[0])
        //     }).catch(error =>{})
        // })
        const editCategory =((params)=>{
            submit_button_type.value = params.type;
            category_first_disabled.value = false;
            category_second_name.value = true;
            submit_button_disabled.value = false;
            form.categoryName = params.categoryName.category_name;
            category.current = params.categoryName;
            console.log(category.current);
            console.log(form.categoryName);
            console.log(submit_button_type.value)
            

        });
        const addSecondCategory =((params)=>{
            submit_button_type.value = params.type
            console.log(submit_button_type.value)

            //存储数据
            category.current = params.categoryName
            console.log(params.type, 'params')
            // 禁用一级输入框
            category_first_disabled.value = true
            // 启用确定按钮
            submit_button_disabled.value = false
            // 启用子级输入框
            category_second_disabled.value = false
            // true显示输入框
            category_first_name.value = true
            category_second_name.value = true
            //更新显示显示分类文本
            form.categoryName = params.categoryName.category_name
        })
        const addSecondTitle =(()=>{
            if(!form.secCategoryName) {
                root.$message({
                    message: "子级分类名称不能为空！！",
                    type: "error"
                })
                return false;
            }
            let requestData = {
                categoryName: form.secCategoryName,
                parentId: category.current.id
            }
            AddChildrenCategory(requestData).then(response => {
                let responseData = response.data;
                console.log(response, '')
                root.$message({
                    message: responseData.message,
                    type: "success"
                })
                // 调用分类列表接口
                getInfoCategoryAll()
                // 清空子级输入框内容
                form.secCategoryName = "";
            })
        })

        const EditFirstCategory = (()=>{
            if(category.current.length == 0) {
                root.$message({
                    message: "未选择分类！！",
                    type: "error"
                })
                return false
            }
            let requestData = {
                id: category.current.id,
                categoryName: form.categoryName
            }
            EditCategory(requestData).then(response => {
                console.log(response)
                let responseData = response.data
                root.$message({
                    message: responseData.message,
                    type: "success"
                })

                let data = category.item.filter(item => item.id == category.current.id);
                console.log(data)
                data[0].category_name = responseData.data.data.categoryName;
                // category.current.category_name = responseData.data.data.categoryName;
                // 清空输入框
                form.categoryName = '';
                category.current = [];
            })
        })
        const DeleteCategoryConfirm = ((categoryID)=>{
            delete_id.value=categoryID;
            confirm({
                content: '是否删除该数据, 是否继续!!!',
                tip: "警告",
                fn: deleteCategory,
                catchFn: ()=>{
                    console.log('catchFnc')
                    delete_id.value = ''
                },
                id: "1"
            });
            // DeleteCategory({categoryId: categoryID}).then(response =>{
            //     console.log(response);
            //     console.log('deleteCategory', '')

            // }).catch(error =>{

            // })
        })
        const deleteCategory = (value)=>{
            DeleteCategory({categoryId: delete_id.value}).then(response =>{
                console.log(response);
                console.log(delete_id.value)
                // 操作数组 
                /**
                 * 两个参数的时候是删除，三个参数是替换\插入
                 * splice(指定起始位置, 数据的数量, 新数据)
                 * splice(1, 2, {})
                 * [
                 * {id: "132", category_name: "sdf df "},
                 * {}
                 * ]
                 */
                /**
                 * es6 findIndex
                 * filter 过滤
                 */
                // let index = category.item.findIndex(item => item.id == deleteId.value);
                // 删除数组指定元素
                // category.item.splice(index, 1);
                let newData = category.item.filter(item => item.id != delete_id.value);
                console.log(newData);
                category.item = newData;

            }).catch(error =>{

            })
        }
        //封装成方法
        const getInfoCategory = (()=>{
            root.$store.dispatch('common/getInfoCategory').then(response => {
                console.log('信2息分类', '')
                category.item = response
                // options.caregory = response
            })
        })

        //挂载
        onMounted(()=>{
            // getCategory();
            console.log('信息分类', '')
            getInfoCategoryAll();
            getInfoCategory();
            // root.$store.dispatch('common/getInfoCategory').then(response => {
            //     console.log('信2息分类', '')
            //     // options.caregory = response
            // })
        });

        watch(()=> categoryItem.item, (value) =>{
            console.log(value);
            console.log('信息分类.category', '')
            category.item = value
        });


        const submit = (()=>{
            if(submit_button_type.value == 'category_first_add'){
                addFristCategory();
            }
            if(submit_button_type.value == 'category_first_edit'){
                console.log('EditFirstCategory', '')
                EditFirstCategory();
            }
            if(submit_button_type.value == 'category_second_add'){
                console.log('category_second_add', '')
                addSecondTitle();
            }
            
        })
        const addFristCategory = (()=>{
            if(!form.categoryName) {
                root.$message({
                    message: "分类名称不能为空",
                    type: "error"
                })
                return false;
            }
            // 按钮加载状态
            submit_button_loading.value = true ;
            AddFristCategory({ categoryName: form.categoryName }).then(response =>{
                console.log('AddFristCategory', '')
                let data = response.data
                if(data.resCode === 0){
                console.log(data.message)
                    root.$message({
                        message: data.message,
                        type: "success"
                    })
                    category.item.push(response.data.data)
                    // getCategory();
                    
                }
                submit_button_loading.value=false
                // root.$refs.categoryForm.resetFields();
                form.categoryName = ''
                form.secCategoryName = ''
            }).catch(error =>{
                submit_button_loading.value=false
                // root.$refs.categoryForm.resetFields();
                form.categoryName = ''
                form.secCategoryName = ''
            })
        })
        return{
            category,category_first_name,category_second_name,
            submit_button_loading,category_first_disabled,category_second_disabled,submit_button_disabled,
            form,submit,AddFirst,DeleteCategoryConfirm,deleteCategory,
            editCategory,submit_button_type,EditFirstCategory,addFristCategory,
            confirm,
            addSecondCategory,addSecondTitle,
            getInfoCategory,
            // getCategory
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../../styles/config.scss";
hr{
    width:calc(100% + 60px);
    margin-left:-30px;
    border:none;
    margin-top:30px;
    margin-bottom:30px;
    border-bottom:1px solid #e9e9e9
}
.category-wrap{
    div:first-child{
        &:before{
            top: 20px;
        }
    }
    div:last-child{
        &:before{
            bottom: 20px;
        }
    }
}
.category{
position: relative;
    line-height: 44px;
    cursor: pointer;
    &:before {
        content: '';
        position: absolute;
        left: 22px;
        top: 0;
        bottom: 0;
        width: 32px;
        border-left: 1px dotted #000;
    }
    h4 {
        position: relative;
        padding-left: 40px;
    }
    svg {
        position: absolute;
        left: 15px;
        top: 15px;
        background: #fff;
        font-size: 17px;
    }
    li {
        position: relative;
        padding-left: 36px;
        margin-left: 24px;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 22px;
            width: 32px;
            border-bottom: 1px dotted #000;
        }
    }
    li,h4{
        @include webkit(transition, all .5s ease 0s);
        &:hover{ 
            background-color: #f3f3f3;
            .button-group{
                display: block;
            }
        }
    }
}
.button-group{
    display: none;
    position: absolute;
    z-index: 2;
    right: 12px;
    top: -1px;
    button { font-size: 10px;}
}
.menu-title{
    line-height: 44px;
    padding-left: 22px;
    background-color: #f3f3f3;
}
.form-wrap{
    width: 410px;
    padding-top: 26px;
}
</style>